<template>
  <div class="aside">
    <el-aside :width="isCollpase ? '0' : '208px'">
      <!-- 菜单区域 -->
      <el-menu
        router
        background-color="#fff"
        text-color="#000"
        active-text-color="#fff"
        default-active="/roleManage"
      >
        <!-- 一级菜单 -->
        <el-menu-item v-for="item in menuList" :key="item.id" :index="item.pathName">
          <i :class="item.iconfont"></i>
          <span slot="title" class="title">{{ item.menuName }}</span>
        </el-menu-item>
        <span class="technical-advice">
          <i class="iconfont iconerji"></i>技术咨询：QQ群号811437059
        </span>
      </el-menu>
    </el-aside>
    <div :class="toggleButton" @click="toggleMenu">
      <span class="iconfont iconzhedie6"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data () {
    return {
      isCollpase: false,
      menuList: [
        {
          id: 0,
          menuName: '用户管理',
          pathName: '/userManage',
          iconfont: 'iconfont iconyonghuguanli'
        },
        {
          id: 1,
          menuName: '角色管理',
          pathName: '/roleManage',
          iconfont: 'iconfont iconnavicon-jsgl'
        },
        {
          id: 2,
          menuName: '部门管理',
          pathName: '/sectionManage',
          iconfont: 'iconfont iconbumenguanli'
        },
        {
          id: 3,
          menuName: '菜单管理',
          pathName: '/menuManage',
          iconfont: 'iconfont iconcaidanguanli'
        },
        {
          id: 4,
          menuName: '部门权限管理',
          pathName: '/departmentPowerManage',
          iconfont: 'iconfont iconquanxianguanli'
        },
        {
          id: 5,
          menuName: '权限管理',
          pathName: '/powerManage',
          iconfont: 'iconfont iconquanxianguanli1'
        },
        {
          id: 6,
          menuName: '节假日配置管理',
          pathName: '/holidayManage',
          iconfont: 'iconfont iconrili'
        },
        {
          id: 7,
          menuName: '系统使用情况',
          pathName: '/systemUseInfo',
          iconfont: 'iconfont iconyingpan'
        },
        {
          id: 8,
          menuName: '系统日志',
          pathName: '/systemLog',
          iconfont: 'iconfont iconxitongrizhi'
        },
        {
          id: 9,
          menuName: '系统配置',
          pathName: '/systemConfig',
          iconfont: 'iconfont iconpeizhi1'
        },
        {
          id: 10,
          menuName: '通知公告',
          pathName: '/notice',
          iconfont: 'iconfont iconicon-test'
        },
        {
          id: 11,
          menuName: '数据字典',
          pathName: '/dataDictionary',
          iconfont: 'iconfont iconshujuzidian'
        },
        {
          id: 12,
          menuName: '操作权限',
          pathName: '/oprationPower',
          iconfont: 'iconfont icondianji'
        }
      ]
    }
  },
  methods: {
    toggleMenu () {
      this.isCollpase = !this.isCollpase
    }
  },
  computed: {
    toggleButton () {
      if (this.isCollpase) {
        return 'minMargin'
      } else {
        return 'maxMargin'
      }
    }
  }
}
</script>

<style scoped lang="less">
.minMargin {
  top: 50%;
  width: 14px;
  height: 58px;
  line-height: 58px;
  z-index: 999;
  cursor: pointer;
  background: #fff;
  position: absolute;
  cursor: pointer;
  margin-left: 0;
}
.maxMargin {
  top: 50%;
  width: 14px;
  height: 58px;
  line-height: 58px;
  z-index: 999;
  cursor: pointer;
  background: #fff;
  position: absolute;
  cursor: pointer;
  margin-left: 208px;
}
.el-aside {
  height: 100%;
}
.el-menu {
  border-right: none;
  height: 100%;
}
.el-menu-item {
  height: 60px;
  border-top: 1px dotted #ccc;
}
.el-menu-item.is-active {
  background: #054e8b !important;
}
.el-menu-item i {
  padding-right: 19px;
}
.el-menu {
  position: relative;
}
.technical-advice {
  display: block;
  width: 100%;
  color: #054e8b;
  font-size: 12px;
  text-align: center;
  margin-top: 14px;
}
</style>
